<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>TMS - 系统消息</title>
    <style>
    html,
    body {
        margin: 0;
        font-family: Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
    }
    
    .tms-mail-tmpl-container {
        padding: 16px;
    }
    
    .tms-mail-tmpl-container > .header {
        position: relative;
        height: 50px;
    }
    
    .tms-mail-tmpl-container > .header > .divider {
        height: 1px;
        background-color: #dcd1d1;
        position: absolute;
        bottom: -16px;
        left: 0;
        right: 0;
        box-shadow: 0 0px 1px 0px #ece3e3;
    }
    
    .tms-mail-tmpl-container > .header > .logo {
        background-color: #0000FF;
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tms-mail-tmpl-container > .header > .content {
        display: inline-block;
        height: 50px;
        position: absolute;
        left: 60px;
        top: 0;
    }
    
    .tms-mail-tmpl-container > .header > .content > .title {
        font-weight: bold;
        font-size: 25px;
        color: blue;
    }
    
    .tms-mail-tmpl-container > .header > .content > .meta {
        font-size: 12px;
        margin-top: 5px;
        border-left: 2px #ddddea solid;
        padding-left: 5px;
    }
    
    .tms-mail-tmpl-container > .header > .content > .meta > .date {
        color: #2185d0;
    }
    
    a.link {
        text-decoration: none;
        color: #4183C4;
        font-weight: bold;
        cursor: pointer;
    }
    
    a.link:hover {
        color: #1e70bf;
        text-decoration: underline;
    }
    
    .tms-mail-tmpl-container > .main {
        margin-top: 32px;
        position: relative;
    }
    
    .tms-mail-tmpl-container > .main > .title {}
    
    .tms-mail-tmpl-container > .main > .divider {
        height: 1px;
        background-color: #ece9e9;
        margin: 8px 0;
    }
    
    .tms-mail-tmpl-container > .main > .content {
        min-height: 100px;
        background-color: #D9EDF7;
        padding: 16px;
    }
    
    .tms-mail-tmpl-container > .footer {
        margin-top: 16px;
        text-align: center;
        color: #bfbfcc;
        font-size: 12px;
    }
    
    @media only screen and (max-width: 767px) {
        .tms-mail-tmpl-container {
        	padding: 8px 0 16px;
    	}
    }
    
    </style>
</head>

<body>
    <div class="tms-mail-tmpl-container">
        <div class="header">
            <span class="logo">TMS</span>
            <div class="content">
                <div class="title">系统消息</div>
                <div class="meta">
                    <a class="link" th:href="${'mailto:' + user.mails}" th:text="${(not #strings.isEmpty(user.name)) ? user.name : user.username}">席维成</a> <span style="color: #2185d0;">发送于</span> <span class="date" th:text="${#dates.format(date,'yyyy/MM/dd HH:mm:ss')}">2017/11/11 11:11:11</span>
                </div>
            </div>
            <div class="divider"></div>
        </div>
        <div class="main">
            <div class="title">
                <a class="link" th:href="${href}" th:text="${title}">下面的沟通消息有分享到你</a>
            </div>
            <div class="divider"></div>
            <div class="content" th:utext="${content}">下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你下面的沟通消息有分享到你</div>
        </div>
        <div class="footer">© 2016-2017 这封邮件由TMS系统发出</div>
    </div>
</body>

</html>
